<template>
  <div class="mixed-gas-list g-flex--column">
    <!-- <div>
      <el-button class="g-mb8" @click="handleAdd" v-if="mixedGasList.length < 2 && !props.readonly"
        ><CIcon class="g-mr4" type="c-xian-xinjian"></CIcon>新增混合气体</el-button
      >
    </div> -->
    <div class="mixed-gas-list-ul" v-if="mixedGasList.length">
      <div class="mixed-gas-list-li" v-for="item in mixedGasList" :key="item.gas">
        <el-select
          class="mixed-gas-list-li--gas"
          v-model="item.gas"
          placeholder="气体名称"
          clearable
          disabled
        >
          <el-option
            v-for="item in MixedGasListOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          class="mixed-gas-list-li--ratio"
          @wheel.stop.prevent
          type="number"
          :min="0"
          :max="100"
          v-positive-only:2
          v-model="item.ratio"
          placeholder="体积占比"
          @blur="handleValid"
          :disabled="props.readonly || mixedGasList.length < 2"
        >
          <template #append>%</template>
        </el-input>
        <el-input
          class="mixed-gas-list-li--molarMass"
          v-model="item.molarMass"
          placeholder="摩尔质量"
          disabled
        >
          <template #append>g/mol</template>
        </el-input>
        <!-- <CIconButton
          icon="c-xian-cha"
          @click="handleDel(item.gas)"
          disable-tooltip
          v-if="!props.readonly"
        ></CIconButton> -->
      </div>
    </div>
    <span class="mixed-gas-list-tips">若是二氧化碳保护焊造成的CO₂排放，需设定混合气体占比</span>
  </div>
</template>

<script lang="ts" setup name="MixedGasList">
import { computed, defineProps, defineEmits, withDefaults } from 'vue';
import { useFormItem } from 'element-plus';

interface MixedGasListProps {
  modelValue: MixedGasItem[];
  readonly?: boolean;
}
const props = withDefaults(defineProps<MixedGasListProps>(), {
  readonly: false
});
const emits = defineEmits(['update:modelValue', 'change']);

const { form } = useFormItem();

const MixedGasListOption = [
  {
    molarMass: 44,
    label: 'CO₂',
    value: 'CO2'
  },
  {
    molarMass: 40,
    label: 'Ar',
    value: 'Ar'
  }
];

interface MixedGasItem {
  gas: 'CO2' | 'Ar';
  ratio: number | string;
  molarMass: number;
}

const mixedGasList = computed<MixedGasItem[]>({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  }
});

function handleAdd() {
  let addType = 'CO2';
  let ratio: string | number = '';
  if (!mixedGasList.value?.length) {
    ratio = 100;
  }
  if (mixedGasList.value?.length && mixedGasList.value[0].gas === 'CO2') {
    addType = 'Ar';
  }

  if (addType === 'CO2') {
    mixedGasList.value.push({
      gas: 'CO2',
      ratio: ratio,
      molarMass: 44
    });
  } else {
    mixedGasList.value.push({
      gas: 'Ar',
      ratio: '',
      molarMass: 40
    });
  }
}

function handleDel(gas: MixedGasItem['gas']) {
  const index = mixedGasList.value.findIndex(n => n.gas === gas);
  if (index > -1) {
    mixedGasList.value.splice(index, 1);
  }
  handleValid();
}

function handleValid() {
  console.log('handleValid', form);
  form?.validateField('mixedGasList');
}
</script>

<style lang="scss" scoped>
.mixed-gas-list {
  .mixed-gas-list-ul {
    padding: 12px 40px 12px 16px;
    width: 100%;
    background: #f3f7fb;
    border-radius: 3px;
    border: 1px solid #ebeff2;
    .mixed-gas-list-li {
      display: flex;
      .mixed-gas-list-li--gas {
        margin-right: 8px;
        width: 220px;
      }
      .mixed-gas-list-li--ratio {
        margin-right: 8px;
        width: 140px;
        :deep(.el-input-group__append) {
          background: #fff;
          padding: 0 12px;
        }
      }
      .mixed-gas-list-li--molarMass {
        margin-right: 8px;
        width: 160px;
        :deep(.el-input-group__append) {
          background: #fff;
          padding: 0 12px;
        }
      }
      .mixed-gas-list-li--del {
        width: 32px;
        height: 32px;
      }
    }
    .mixed-gas-list-li + .mixed-gas-list-li {
      margin-top: 8px;
    }
  }
  .mixed-gas-list-tips {
    margin-top: 4px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
  }
}
</style>
